<template>
  <view class="desensitization-container pageBg">
    <view class="page-header">
      <view class="page-title">文章脱敏应用</view>
      <view class="page-description">
        自动识别并处理文章中的敏感信息，保护个人隐私和机密数据
      </view>
    </view>

    <view class="content-area">
      <view class="input-section">
        <view class="section-title">
          <uni-icons type="file-text" size="20" color="#1890ff"></uni-icons>
          <text>输入需要脱敏的内容</text>
        </view>
        
        <view class="input-options">
          <view class="option-tabs">
            <view 
              class="option-tab" 
              :class="{ active: activeTab === 'text' }" 
              @click="switchTab('text')"
            >
              <uni-icons type="compose" size="16" color="#666"></uni-icons>
              <text>文本输入</text>
            </view>
          </view>
          
          <!-- 文本输入区域 -->
          <view v-if="activeTab === 'text'" class="text-input-area">
            <textarea 
              v-model="inputText" 
              placeholder="请输入需要脱敏的文本内容..." 
              class="text-input"
              :maxlength="10000"
            ></textarea>
          </view>
          
          <view class="action-buttons">
            <button 
              class="analyze-btn" 
              :disabled="!canAnalyze" 
              :class="{ disabled: !canAnalyze }"
              @click="analyzeContent"
            >
              <uni-icons type="search" size="18" color="#fff"></uni-icons>
              <text>AI 分析</text>
            </button>
          </view>
        </view>
      </view>
      
      <!-- 分析结果区域 -->
      <view v-if="showResults" class="result-section">
        <view class="section-title">
          <uni-icons type="checkbox-filled" size="20" color="#52c41a"></uni-icons>
          <text>脱敏结果</text>
        </view>
        
        <view class="result-content">
          <view v-if="isLoading" class="loading-state">
            <uni-icons type="spinner-cycle" size="30" color="#1890ff"></uni-icons>
            <text>正在分析中，请稍候...</text>
          </view>
          <view v-else class="result-text">
            <rich-text :nodes="processedContent"></rich-text>
          </view>
        </view>
        
        <view class="result-actions">
          <button class="action-btn copy-btn" @click="copyResult">
            <uni-icons type="copy" size="16" color="#1890ff"></uni-icons>
            <text>复制结果</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { openai } from '@/api/apis';

// 状态变量
const activeTab = ref('text');
const inputText = ref('');
const uploadedFile = ref(null);
const isLoading = ref(false);
const showResults = ref(false);
const processedContent = ref('');
const analysisResult = ref(null);
const fileContent = ref(''); // 存储解析后的文件内容

// 计算属性
const canAnalyze = computed(() => {
  if (activeTab.value === 'text') {
    return inputText.value.trim().length > 0;
  } else {
    return uploadedFile.value !== null;
  }
});

// 切换输入方式
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 选择文件
const chooseFile = () => {
  uni.chooseFile({
    count: 1,
    extension: ['.docx', '.doc'],
    success: (res) => {
      try {
        const file = res.tempFiles[0];
        uploadedFile.value = {
          name: file.name,
          path: file.path,
          size: file.size,
          file: file // 保存文件对象以便后续处理
        };
        
        // 解析文件内容
        if (file.name.endsWith('.docx') || file.name.endsWith('.doc')) {
          parseDocumentFile(file);
        } else {
          uni.showToast({
            title: '请上传Word文档(.docx或.doc格式)',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('文件处理失败:', error);
        uni.showToast({
          title: '文件处理失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      console.error('文件选择失败:', err);
      uni.showToast({
        title: '文件选择失败',
        icon: 'none'
      });
    }
  });
};

// 移除文件
const removeFile = () => {
  uploadedFile.value = null;
  fileContent.value = '';
};

// 使用文本提取方法
const extractTextFromFile = (file) => {
  return new Promise((resolve, reject) => {
    // 对于docx文件，我们尝试使用简单的文本提取方法
    // 这里使用模拟数据，实际项目中可以使用其他库或后端API
    const reader = new FileReader();
    
    reader.onload = () => {
      // 由于浏览器端直接解析docx比较复杂，这里使用模拟数据
      // 在实际项目中，可以考虑:
      // 1. 使用后端API解析文档
      // 2. 使用其他更轻量级的库
      // 3. 限制用户只能上传纯文本文件
      
      // 模拟从文件中提取的文本
      const simulatedText = `河南农业大学（Henan Agricultural University），简称河南农大，位于河南省郑州市，由中华人民共和国农业部、国家林业和草原局与省政府共建高校，是河南省省属重点大学，河南省特色骨干大学，入选国家"2011计划"、国家建设高水平大学公派研究生项目`;
      
      resolve(simulatedText);
    };
    
    reader.onerror = (error) => {
      reject(new Error('文件读取失败: ' + error.message));
    };
    
    // 尝试读取文件
    try {
      reader.readAsText(file);
    } catch (error) {
      reject(new Error('文件读取失败: ' + error.message));
    }
  });
};

// 解析文档文件
const parseDocumentFile = async (file) => {
  isLoading.value = true;
  
  try {
    // 使用简单的文本提取方法
    fileContent.value = await extractTextFromFile(file);
    
    // 显示解析成功提示
    uni.showToast({
      title: '文档解析成功',
      icon: 'success'
    });
  } catch (error) {
    console.error('文档解析失败:', error);
    
    // 提供更友好的错误提示
    let errorMessage = '文档解析失败';
    if (error.message.includes('zip file')) {
      errorMessage = '文件格式不正确，请确保上传有效的Word文档';
    }
    
    uni.showToast({
      title: errorMessage,
      icon: 'none',
      duration: 3000
    });
    
    // 清除已上传的文件
    uploadedFile.value = null;
  } finally {
    isLoading.value = false;
  }
};

// 将文件读取为ArrayBuffer - 保留但不使用这个方法
const readFileAsArrayBuffer = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = (e) => reject(new Error('文件读取失败'));
    reader.readAsArrayBuffer(file);
  });
};

// 格式化显示结果
const formatResult = (result) => {
  try {
    // 尝试解析JSON内容
    if (result.content && result.content.includes('```json')) {
      // 提取JSON部分
      const jsonMatch = result.content.match(/```json\n([\s\S]*?)\n```/);
      if (jsonMatch && jsonMatch[1]) {
        const jsonData = JSON.parse(jsonMatch[1]);
        
        // 构建HTML展示
        let html = '<div class="result-card">';
        
        // 添加基本信息
        html += `<div class="result-header">
                  <div class="result-item"><span class="label">编号:</span> ${result.henauNumber || '无'}</div>
                  <div class="result-item"><span class="label">用户:</span> ${result.userName || '无'}</div>
                  <div class="result-item"><span class="label">时间:</span> ${new Date(result.createTime).toLocaleString()}</div>
                </div>`;
        
        // 添加识别结果
        html += '<div class="result-body">';
        html += '<h3>识别结果:</h3>';
        
        // 遍历JSON数据
        for (const [key, values] of Object.entries(jsonData)) {
          if (values.length > 0) {
            html += `<div class="entity-group">
                      <div class="entity-type">${key}:</div>
                      <div class="entity-values">`;
            
            values.forEach(value => {
              html += `<span class="entity-tag">${value}</span>`;
            });
            
            html += `</div></div>`;
          }
        }
        
        html += '</div></div>';
        return html;
      }
    }
    
    // 如果不是预期的JSON格式，直接返回内容
    return result.content || '无内容';
  } catch (error) {
    console.error('格式化结果出错:', error);
    return result.content || '无法解析结果';
  }
};

// 分析内容
const analyzeContent = async () => {
  isLoading.value = true;
  showResults.value = true;
  
  try {
    let contentToAnalyze = '';
    
    if (activeTab.value === 'text') {
      contentToAnalyze = inputText.value;
    } else if (uploadedFile.value) {
      // 使用已解析的文件内容
      if (fileContent.value) {
        contentToAnalyze = fileContent.value;
      } else {
        throw new Error('文件内容解析失败');
      }
    }
    
    // 准备请求数据
    const requestData = {
      content: contentToAnalyze,
      id: "1895725370250919938" // 文章脱敏应用
    };
    
    // 调用API
    const response = await openai(requestData);
    
    if (response.code === 200) {
      analysisResult.value = response.data;
      processedContent.value = formatResult(response.data);
    } else {
      throw new Error(response.message || '请求失败');
    }
      
  } catch (error) {
    console.error('分析失败:', error);
    uni.showToast({
      title: '分析失败，请重试',
      icon: 'none'
    });
  } finally {
    isLoading.value = false;
  }
};

// 复制结果
const copyResult = () => {
  // 如果有分析结果，复制格式化后的纯文本
  let textToCopy = '';
  
  if (analysisResult.value && analysisResult.value.content) {
    // 提取JSON内容并格式化为易读的文本
    const jsonMatch = analysisResult.value.content.match(/```json\n([\s\S]*?)\n```/);
    if (jsonMatch && jsonMatch[1]) {
      try {
        const jsonData = JSON.parse(jsonMatch[1]);
        textToCopy = `分析结果:\n`;
        
        for (const [key, values] of Object.entries(jsonData)) {
          if (values.length > 0) {
            textToCopy += `${key}: ${values.join(', ')}\n`;
          }
        }
      } catch (e) {
        textToCopy = analysisResult.value.content.replace(/```json|```/g, '').trim();
      }
    } else {
      textToCopy = analysisResult.value.content;
    }
  } else {
    textToCopy = processedContent.value.replace(/<[^>]+>/g, '');
  }
  
  uni.setClipboardData({
    data: textToCopy,
    success: () => {
      uni.showToast({
        title: '已复制到剪贴板',
        icon: 'success'
      });
    }
  });
};

// 下载结果
const downloadResult = () => {
  // 在实际应用中，这里应该调用API生成文档并下载
  if (!analysisResult.value) {
    uni.showToast({
      title: '没有可下载的结果',
      icon: 'none'
    });
    return;
  }
  
  uni.showToast({
    title: '文档下载功能开发中',
    icon: 'none'
  });
};

onMounted(() => {
  // 页面加载时的初始化逻辑
});
</script>

<style>
.desensitization-container {
  padding: 30rpx;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 40rpx;
  text-align: center;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.page-description {
  font-size: 28rpx;
  color: #666;
}

.content-area {
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.input-section, .result-section {
  padding: 30rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 30rpx;
}

.section-title text {
  margin-left: 12rpx;
}

.input-options {
  background-color: #f9fafc;
  border-radius: 12rpx;
  padding: 20rpx;
}

.option-tabs {
  display: flex;
  margin-bottom: 20rpx;
  border-bottom: 2rpx solid #eee;
}

.option-tab {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  margin-right: 20rpx;
  border-radius: 8rpx 8rpx 0 0;
  cursor: pointer;
}

.option-tab text {
  margin-left: 8rpx;
  font-size: 28rpx;
  color: #666;
}

.option-tab.active {
  background-color: #e6f7ff;
  border-bottom: 4rpx solid #1890ff;
}

.option-tab.active text {
  color: #1890ff;
  font-weight: 500;
}

.text-input-area {
  width: 93%;
  margin-bottom: 20rpx;
}

.text-input {
  width: 100%;
  height: 300rpx;
  padding: 20rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: #fff;
}

.file-upload-area {
  margin-bottom: 20rpx;
}

.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300rpx;
  border: 2rpx dashed #d9d9d9;
  border-radius: 8rpx;
  background-color: #fafafa;
  cursor: pointer;
}

.upload-text {
  margin-top: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.upload-hint {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #999;
}

.file-info {
  padding: 20rpx;
  background-color: #f0f7ff;
  border-radius: 8rpx;
}

.file-name {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.file-name text {
  margin-left: 8rpx;
  word-break: break-all;
}

.file-actions {
  display: flex;
  justify-content: flex-end;
}

.action-buttons {
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}

.analyze-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40rpx;
  height: 80rpx;
  background-color: #1890ff;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.3);
  transition: all 0.3s;
}

.analyze-btn text {
  margin-left: 8rpx;
}

.analyze-btn.disabled {
  background-color: #d9d9d9;
  box-shadow: none;
  cursor: not-allowed;
}

.result-content {
  background-color: #f9fafc;
  border-radius: 8rpx;
  padding: 20rpx;
  min-height: 200rpx;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.loading-state text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.result-text {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
  word-break: break-all;
}

.result-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  padding: 12rpx 24rpx;
  margin-left: 16rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  background-color: #fff;
  border: 2rpx solid #d9d9d9;
}

.action-btn text {
  margin-left: 8rpx;
}

.copy-btn, .download-btn {
  border-color: #d9d9d9;
  color: #1890ff;
}

.remove-btn {
  border-color: #ffccc7;
  color: #ff4d4f;
}

/* 添加结果卡片样式 */
.result-card {
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 20rpx;
}

.result-header {
  background-color: #f0f7ff;
  padding: 20rpx;
  border-bottom: 1rpx solid #e6f0ff;
}

.result-item {
  margin-bottom: 10rpx;
  font-size: 26rpx;
  color: #666;
}

.result-item:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: 500;
  color: #333;
  margin-right: 10rpx;
}

.result-body {
  padding: 20rpx;
}

.result-body h3 {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.entity-group {
  margin-bottom: 20rpx;
}

.entity-type {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.entity-values {
  display: flex;
  flex-wrap: wrap;
}

.entity-tag {
  display: inline-block;
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
  font-size: 26rpx;
  border: 1rpx solid #91d5ff;
}
</style>